<template>
  <div class="builder-container">

    <Tabs size="small">
      <TabPane label="基本配置">
        <Form :label-width="105">

          <FormItem label="按钮文本">
            <Input size="small" v-model="obj.children[0]" placeholder=""/>
          </FormItem>
          <FormItem label="组件尺寸">
            <Select :transfer="true" size="small" v-model="obj.props.size">
              <Option value="default">默认</Option>
              <Option value="small">小型</Option>
              <Option value="large">大型</Option>
            </Select>
          </FormItem>
          <FormItem label="按钮类型">
            <Select :transfer="true" size="small" v-model="obj.props.type">
              <Option value="default">default</Option>
              <Option value="primary">primary</Option>
              <Option value="dashed">dashed</Option>
              <Option value="text">text</Option>
              <Option value="info">info</Option>
              <Option value="success">success</Option>
              <Option value="warning">warning</Option>
              <Option value="error">error</Option>
            </Select>
          </FormItem>
          <FormItem label="按钮背景透明">
            <i-switch v-model="obj.props.ghost">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="宽度100%">
            <i-switch v-model="obj.props.long">
              <span slot="open"></span>
              <span slot="close"></span>
            </i-switch>
          </FormItem>
          <FormItem label="跳转链接">
            <Input size="small" v-model="obj.props.to" placeholder="http://xxx.xxx.com"/>
          </FormItem>
          <FormItem label="跳转链接Target">
            <Select :transfer="true" size="small" v-model="obj.props.target">
              <Option v-for="item in $PnDict.targets" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
          </FormItem>

          <FormItemPanel title="栅格布局配置">
            <FormItem label="栅格列数COL">
              <InputNumber size="small" :max="24" :min="1" v-model="obj.col.span"></InputNumber>
            </FormItem>
            <FormItem label="偏移数OFFSET">
              <InputNumber size="small" :max="24" :min="0" v-model="obj.col.offset"></InputNumber>
            </FormItem>
          </FormItemPanel>
        </Form>
      </TabPane>
      <!--<TabPane label="校验规则">
        <CValidatePanel v-model="obj"></CValidatePanel>
      </TabPane>-->
      <TabPane label="交互">
        <Alert style="padding: 5px;">此脚本中，使用_this指向自定义表单组件vm实例</Alert>
        <CodeEditor v-model="obj.customJsCode"></CodeEditor>
      </TabPane>
    </Tabs>

  </div>
</template>

<script>
  import '../CustomForm.css'

  export default {
    name: 'CButtonBuilder',
    props: {
      value: {
        type: Object
      }
    },
    data() {
      return {
        obj: this.value
      }
    },
    mounted() {

    },
    methods: {

    },
    computed: {

    },
    watch: {
      value (val) {
        this.obj = val;
      },
      obj (val) {
        this.$emit('input', val);
      }
    }
  }
</script>

<style scoped>

</style>
